<template>
	<view>
		<positionContainerVue :show.sync="newShow" tBStyle="display: flex;justify-content: center;" tStyle="transform: translateX(0rpx)" sStyle="padding-right: 0rpx;" @changeShow="changeShow">
			<template #slot-view>
				<view class="flex_center">
					<view class="select-btn" @click="endChange">
						确定
					</view>
				</view>
			</template>
			<template #position-view>
				<!-- 微信小程序因为挂载机制的问题，需要有一个if的操作 -->
				<view v-if="setShowPosition" class="select-picker-box">
					<view class="item">
						<customizePickerVue :pickerValue.sync="leftTime" :picker-column="pickerColumn" />
					</view>
					<view class="text">
						至
					</view>
					<view class="item">
						<customizePickerVue :pickerValue.sync="rightTime" :picker-column="pickerColumn" />
					</view>
				</view>
			</template>
		</positionContainerVue>
	</view>
</template>

<script>

  	import util from '@/utils/util';
	import customizePickerVue from '../../../components/customize-picker/customize-picker.vue';
	import positionContainerVue from '../../../components/position-container/position-container.vue';

	export default {
		props: {
			show: {
				type: Boolean
			},
		},
		components: {
			positionContainerVue,
			customizePickerVue,
		},
		data() {
			const today = util.formatDate.format(new Date,'yyyy-MM-dd 00:00:00');
			return {
				newShow: false,
				leftTime: [0,0,0],
				rightTime: [0,0,0],
				today: today,
				pickerColumn: [
					{
						suffix: '年',
						key: 'Y',
						style: `font-size: 28rpx;white-space: nowrap;`,
						list: [],
					},
					{
						suffix: '月',
						key: 'M',
						style: `font-size: 28rpx;`,
						list: [],
					},
					{
						suffix: '日',
						key: 'D',
						style: `font-size: 28rpx;`,
						list: [],
					},
				]
			};
		},
		computed: {
			setShowPosition(){
				let show = true;
				// #ifdef MP
				show = this.newShow;
				// #endif
				return show;
			},
		},
		watch: {
			show(val){
				this.newShow = val;
			}
		},
		mounted(){
			this.setPickerColumn();
			this.resetTime();
		},
		methods: {
			changeShow(){
				this.$emit('update:show',this.newShow);
				this.$emit('changeShow', 'workingHours');
			},
			generateSequence(count,initial = 0) {
				const init = Number(initial);
				return [...Array(count).keys()].map(i => {
					const num = i + init;
					const str = num < 10 ? `0${num}` : `${num}`;
					return str;
				});
			},
			setPickerColumn(){
				this.$set(this.pickerColumn[0],'list',this.generateSequence(100, this.today.split('-')[0]));
				this.$set(this.pickerColumn[1],'list',this.generateSequence(12,1));
				this.$set(this.pickerColumn[2],'list',this.generateSequence(31,1));
			},
			resetTime(){
				const date = new Date();
				const m = date.getMonth();
				const d = date.getDate();
				console.log(m,d);
				this.leftTime = [0, m, d - 1];
				this.rightTime = [0, m, d - 1];
			},
			endChange(){
				if (!this.newShow) return false;
				let leftArr = [],rightArr = [];
				this.leftTime.forEach((v, i) => {
					const str = this.pickerColumn[i].list[v];
					leftArr.push(str);
				});
				this.rightTime.forEach((v, i) => {
					const str = this.pickerColumn[i].list[v];
					rightArr.push(str);
				});
				const startTime = leftArr.join('-');
				const endTime = rightArr.join('-');
				const dt = new Date(this.today).getTime();
				const st = new Date(startTime).getTime();
				const et = new Date(endTime).getTime();
				let tips;
				if (st < dt) tips = '开始日期不能早于今天';
				else if (et < dt) tips = '结束日期不能早于今天';
				else if (st > et) tips = '开始时间不能晚于结束日期';
				// else if (st > et) tips = '开始日期不可等于结束日期';
				if (tips) {
					uni.showToast({
						title: tips,
						icon: 'none',
						mask: true,
					})
					return false;
				}
				this.$emit('endChange',{startTime,endTime,startIndex:this.leftTime,endIndex:this.rightTime});
				// this.resetTime();
			},
		}
	}
</script>

<style lang="less" scoped>
.select-btn {
	width: 401rpx;
	height: 70rpx;
	background: #E7F5F4;
	border-radius: 10rpx;
	border: 1rpx dashed #0FA291;
	font-size: 28rpx;
	color: #0FA291;
	display: flex;
	align-items: center;
	justify-content: center;
}
.select-picker-box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.item {
		width: 310rpx;
		// flex: 1;
	}
	// .text {
	// 	padding: 0 10rpx;
	// }
	::v-deep {
		.picker-view-box {
			.picker_item {
				font-size: 28rpx;
			}
		}
	}
}
</style>
